<template>
  <div>
    <a-row>
      <a-col span="8">
        <a-card style="height: 50vh;overflow-y: auto;overflow-x: auto">
          <a-form :form="form">
            <a-form-item
                label="指标名"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-input
                  v-decorator="['label', {
                                rules: [{ required: true, message: '请输入指标名！' }],
                                initialValue: this.editData && this.editData.label
                            }]"
                  allowClear
                  style="width: 80%"
              />
            </a-form-item>
            <a-form-item
                label="聚合条件"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-select
                  v-decorator="['aggregateType', {
                                rules: [{ required: true, message: '请输入指标名！' }],
                                initialValue: this.editData && this.editData.aggregateType
                            }]"
                  allowClear
                  style="width: 80%"
              >
                <a-select-option value="1">
                  求总数
                </a-select-option>
                <a-select-option value="2">
                  求不同项总数
                </a-select-option>
                <a-select-option value="3">
                  求和
                </a-select-option>
                <a-select-option value="4">
                  求平均值
                </a-select-option>
                <a-select-option value="5">
                  求最大值
                </a-select-option>
                <a-select-option value="6">
                  求最小值
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
                label="搜索字段"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-cascader :options="getOptions"
                          v-decorator="['searchField', {
                                rules: [{ required: true, message: '请选择搜索字段！' }],
                                initialValue: this.editData && this.editData.searchField.split('.')
                            }]"
                          allowClear
                          style="width: 80%"
              />
            </a-form-item>
            <a-form-item
                label="统计字段"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-cascader :options="getOptions"
                          v-decorator="['functionField', {
                                initialValue: this.editData ?this.editData.functionField? this.editData.functionField.split('.'):null:null
                            }]"
                          allowClear
                          style="width: 80%"
              />
            </a-form-item>
            <a-form-item
                label="时间片"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-input-number
                  :min="1"
                  v-decorator="['searchIntervalValue', {
                                rules: [{ required: true, message: '请输入时间片！' }],
                                initialValue: this.editData && this.editData.searchIntervalValue
                            }]"
                  allowClear
                  style="width: 80%"
              />
            </a-form-item>
            <a-form-item
                label="时间单位"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-select
                  v-decorator="['searchIntervalType', {
                                rules: [{ required: true, message: '请选择时间单位！' }],
                                initialValue: this.editData && this.editData.searchIntervalType
                            }]"
                  allowClear
                  style="width: 80%"
              >
                <a-select-option value="1">
                  年
                </a-select-option>
                <a-select-option value="2">
                  月
                </a-select-option>
                <a-select-option value="5">
                  日
                </a-select-option>
                <a-select-option value="11">
                  天
                </a-select-option>
                <a-select-option value="12">
                  分
                </a-select-option>
                <a-select-option value="13">
                  秒
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
                label="备注"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-input
                  v-decorator="['comment', {
                                initialValue: this.editData && this.editData.comment
                            }]"
                  allowClear
                  style="width: 80%"
              />
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col span="16">
        <a-card style="height: 50vh;overflow: auto">
          <div v-if="!conditionData.class" style="text-align: center">
            <a-button type="dashed" icon="plus" @click="addCondition">
              添加过滤条件
            </a-button>
          </div>
          <Assemble
              :assemble-data="conditionData"
              :previous="conditionData"
          ></Assemble>
        </a-card>
      </a-col>
    </a-row>
    <div style="text-align: center">
      <a-space>
        <a-button type="primary" @click="handleOk">保存</a-button>
        <a-button type="danger" @click="reset">重置</a-button>
        <a-button v-if="this.popupTitle != '新建'" type="danger" @click="deleteAbstraction">删除</a-button>
      </a-space>
    </div>
  </div>
</template>

<script>
import {mapActions, mapGetters, mapState} from "vuex";
import Assemble from "@/pages/systemManage/abstractionList/condition/Assemble";

export default {
  name: "AbstractionForm",
  components: {Assemble},
  props: {
    editData: Object
  },
  computed: {
    ...mapState('abstractionList', ['popupTitle']),
    ...mapState('fieldManage', ['tableData']),
    ...mapGetters('rule', ['generateScript']),
    getOptions() {
      let data = []
      this.tableData.map((obj) => {
        data.push({value: obj.fieldName, label: obj.label})
      })
      return [{
        value: 'fields',
        label: '基础字段',
        children: data
      }]
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      conditionData: this.editData ? JSON.parse(this.editData.ruleDefinition) : {
        class: "complex",
        conditions: [{
          class: "simple", expressions: {}
        }]
      }
    }
  },
  methods: {
    ...mapActions('abstractionList', ['addAbstraction', 'queryAllAbstraction', 'update', 'deleteById']),
    addCondition() {
      this.conditionData = {
        class: "complex",
        conditions: [{
          class: "simple", expressions: {}
        }]
      }
    },
    reset() {
      this.addCondition()
      this.form.resetFields()
    },
    deleteAbstraction() {
      this.deleteById(this.editData.objectId)
    },
    checkConditionData() {
      if (!this.conditionData.class || this.conditionData.conditions.length < 1) {
        this.$message.error('信息不完整')
        return false
      }
      return true
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let {searchField, functionField} = values
          searchField = searchField[0] + '.' + searchField[1]
          if (functionField) {
            functionField = functionField[0] + '.' + functionField[1]
          }
          if (this.checkConditionData()) {
            return
          }
          let ruleScript = this.generateScript(this.conditionData)
          let ruleDefinition = JSON.stringify(this.conditionData)
          values = {...values, searchField, functionField, ruleScript, ruleDefinition}
          if (this.popupTitle == '新建') {
            this.addAbstraction(values).then(() => {
              this.queryAllAbstraction()
            })
          } else {
            this.update(values).then(() => {
              this.queryAllAbstraction()
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
